
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="stylesheet" href="theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <link rel="stylesheet" href="styles/style.css" type="text/css" charset="utf-8"/>
    <script type="text/javascript" src="../json/jsonrpc.js"></script>
    <script type="text/javascript" src="../cfg.js"></script>
    <script src="OpenLayers.js"></script>
    <!--[if lte IE 6]>
        <style>
            .customEditingToolbar {
                width: 200px;
            }
        </style>
    <![endif]-->   
    <style>
.modal-profile h2 {
	font-size:2em;
	letter-spacing:-1px;
}
.modal-profile {
	display:none;
	height: 350px;
	width: 600px;
	padding:25px;
	border:1px solid #fff;
	box-shadow: 0px 2px 7px #292929;
	-moz-box-shadow: 0px 2px 7px #292929;
	-webkit-box-shadow: 0px 2px 7px #292929;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	background: #f2f2f2;
	z-index:3000;
}


.modal-lightsout {
	display:none;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	z-index:2500;
	background:#000;
}

a.modal-close-profile {
	position:absolute;
	top:-15px;
	right:-15px;
}

a.modal-social {
	margin:0 10px 0 0;
}


   body{
      margin:0px;
      padding:0px;           
      font-family:Arial;
  }


  #output {
      font-size: 0.85em;
      margin: 0em 0 0em 0;
      width: 100%;
      height: 20em;
  }
  .customEditingToolbar {
      float: left;
      right: 0px;
      height: 30px; 
  }
  .customEditingToolbar div {
      float: left;
      margin: 5px;
      width: 24px;
      height: 24px;
  }
  .olControlNavigationItemActive { 
      background-image: url("theme/default/img/editing_tool_bar.png");
      background-repeat: no-repeat;
      background-position: -103px -23px; 
  }
  .olControlNavigationItemInactive { 
      background-image: url("theme/default/img/editing_tool_bar.png");
      background-repeat: no-repeat;
      background-position: -103px -0px; 
  }
  .olControlDrawFeaturePointItemInactive { 
      background-image: url("theme/default/img/editing_tool_bar.png");
      background-repeat: no-repeat;
      background-position: -78px 0px; 
  }
  .olControlDrawFeaturePointItemActive { 
      background-image: url("theme/default/img/editing_tool_bar.png");
      background-repeat: no-repeat;
      background-position: -78px -23px ;                                                                   
  }
  .olControlDrawFeaturePolygonItemInactive { 
      background-image: url("theme/default/img/editing_tool_bar.png");
      background-repeat: no-repeat;
      background-position: -26px 0px; 
  }
  .olControlDrawFeaturePolygonItemActive { 
      background-image: url("theme/default/img/editing_tool_bar.png");
      background-repeat: no-repeat;
      background-position: -26px -23px ;                                                                   
  }
  .olControlModifyFeatureItemActive { 
      background-image: url(theme/default/img/move_feature_on.png);
      background-repeat: no-repeat;
      background-position: 0px 1px;
  }
  .olControlModifyFeatureItemInactive { 
      background-image: url(theme/default/img/move_feature_off.png);
      background-repeat: no-repeat;
      background-position: 0px 1px;
  }
  .olControlDeleteFeatureItemActive { 
      background-image: url(theme/default/img/remove_point_on.png);
      background-repeat: no-repeat;
      background-position: 0px 1px;
  }
  .olControlDeleteFeatureItemInactive { 
      background-image: url(theme/default/img/remove_point_off.png);
      background-repeat: no-repeat;
      background-position: 0px 1px;
  }
 </style>
    <script src="bind_edit.js"></script>
    </head>
    <body onload="init()">
         <div id="nav">
         <div id="panel_toolbar" class="customEditingToolbar">555</div>
            <ul id="ul_attr">
                <li><a  href="#" rel="modal-new">新建</a></li>
                <li><a  href="#" rel="modal-output">导出</a></li>
                <li><a  href="#" rel="modal-input">导入</a></li>
                <li><a  href="#" rel="modal-bg">底图</a></li>
                <li><a  href="#" rel="bh_bind">提交</a></li>
               <li>当前层:<select id="editable" name="editable"> </select></li>
                <li class="search">
					<input type="text" size=30 id="attr_fid"/><input class="searchbutton" type="submit" value=""/>
				</li>
            </ul>
        </div>        

        <script type="text/javascript" src="jquery-1.4.2.js"></script>
        <script type="text/javascript">
            $(function() {
                $(window).scroll(function(){
					var scrollTop = $(window).scrollTop();
					if(scrollTop != 0)
						$('#nav').stop().animate({'opacity':'0.2'},400);
					else	
						$('#nav').stop().animate({'opacity':'1'},400);
				});
				
				$('#nav').hover(
					function (e) {
						var scrollTop = $(window).scrollTop();
						if(scrollTop != 0){
							$('#nav').stop().animate({'opacity':'1'},400);
						}
					},
					function (e) {
						var scrollTop = $(window).scrollTop();
						if(scrollTop != 0){
							$('#nav').stop().animate({'opacity':'0.2'},400);
						}
					}
				);
            });
        </script>
 
         <div id="map"  style="width:512px;height: 256px;border: 1px solid #ccc;"></div>
         

<div class="modal-lightsout"></div>
<div class="modal-profile">
    <h2>json文本</h2>
    <a href="#" title="Close profile window" class="modal-close-profile"><img src="close.png" alt="Close profile window" /></a>
    <textarea id="output">paste text here...</textarea>
    <input id="ipt_input" type="button" value="加入" onclick="inputfmt();"/>
    <input id="bg_img" type="text" value="" size=20/>
    <input type="button" value="载入底图" onclick="loadImg();"/>
</div>


    </body>
</html>


